import React from 'react';
import moment from 'moment';
import { dictionaryList } from '@/services/dictionary';
import styles from './form.less';
import { FormContainer } from './FormContainer';
import FormItem from './FormItem';

const Form1 = props => {
    const {
        form,
        dict,
        initialFormInfo: { firstHouseholdType }
    } = props;
    const { required = true, ...otherProps } = props; // required为true和false判断走2套校验规则
    const [hasHouseType, setHasHouseType] = React.useState(true);
    const [secondHouseholdTypeOptions, setSecondHouseholdTypeOptions] = React.useState([]);
    const autocompleteBirthDay = str => {
        if (str.length > 13) {
            const birthDateStr = str.slice(6, 14);
            const computedBirthDay = moment(birthDateStr, 'YYYYMMDD');
            if (computedBirthDay.format('YYYYMMDD') !== 'Invalid date') {
                form.setFieldsValue({ talentBirth: computedBirthDay });
            }
        }
    };
    const handleIdCardChange = e => {
        const cardStr = e.target.value;
        const talentNationalArea = form.getFieldValue('talentNationalArea') || [];
        if (talentNationalArea[0] === '中国') {
            autocompleteBirthDay(cardStr);
        }
    };
    React.useEffect(() => {
        const talentNationalArea = form.getFieldValue('talentNationalArea') || [];
        const talentIdCard = form.getFieldValue('talentIdCard');
        const talentBirth = form.getFieldValue('talentBirth');
        setHasHouseType(!talentNationalArea[0] || talentNationalArea[0] === '中国');
        if (talentNationalArea[0] === '中国' && talentIdCard && !talentBirth) {
            autocompleteBirthDay(talentIdCard);
        }
    }, [form.getFieldValue('talentNationalArea')]);

    React.useEffect(() => {
        (async () => {
            if (dict.household && firstHouseholdType) {
                const targetDict = dict.household.find(item => item.dictValue === firstHouseholdType);
                if (targetDict) {
                    const { code, data } = await dictionaryList({ parentId: targetDict.id });
                    if (code === 10000) {
                        setSecondHouseholdTypeOptions(data);
                    }
                }
            }
        })();
    }, [firstHouseholdType]);
    const renderTalentDegree = (
        <FormItem required type="select" label="最高学历" prop="talentDegree" dictCode="agreeType" {...otherProps} />
    );
    return (
        <>
            <div id="form1" className={styles.title} style={{ marginTop: 0 }}>
                个人信息
            </div>
            <FormContainer>
                <FormItem
                    // required
                    type="input"
                    label="姓名"
                    rules={[
                        {
                            required: true,
                            message: '请输入姓名'
                        },
                        {
                            min: 2,
                            max: 50,
                            message: '请输入2~50个字符'
                        },
                        {
                            pattern: /^[^\s]+(\s+[^\s]+)*$/,
                            message: '此处不能输入空格'
                        }
                    ]}
                    prop="talentName"
                    {...otherProps}
                />
                <FormItem
                    required={required}
                    type="radio"
                    dictCode="sexType"
                    label="性别"
                    prop="talentSex"
                    {...otherProps}
                />
                <FormItem
                    required
                    type="telephone"
                    label="手机号码"
                    prop={['talentAreaCode', 'talentPhone']}
                    {...otherProps}
                />
                <FormItem required type="mail" label="个人邮箱" prop="talentEmail" {...otherProps} />
                <FormItem
                    required={required}
                    type="idCard"
                    label="证件号码"
                    prop="talentIdCard"
                    onChange={handleIdCardChange}
                    {...otherProps}
                />
                <FormItem type="date" label="出生日期" prop="talentBirth" {...otherProps} />
                <FormItem
                    required={required}
                    type="nationalArea"
                    label="籍贯/国籍"
                    prop="talentNationalArea"
                    {...otherProps}
                />
                {hasHouseType && (
                    <FormItem
                        required={required}
                        type="householdType"
                        label="户籍类型"
                        dictCode="household"
                        prop={['firstHouseholdType', 'secondHouseholdType']}
                        initialSecondOptions={secondHouseholdTypeOptions}
                        {...otherProps}
                    />
                )}

                {!hasHouseType && renderTalentDegree}

                <FormItem type="address" label="居住地址" prop={['address', 'detailAddress']} {...otherProps} />

                {hasHouseType && renderTalentDegree}

                <FormItem
                    required={required}
                    type="input"
                    label="学校名称"
                    prop="talentGraduateSchool"
                    {...otherProps}
                />
                <FormItem required={required} type="input" label="专业" prop="talentProfessional" {...otherProps} />

                <FormItem
                    type="healthyState"
                    label="健康状态"
                    dictCode="houseHoldType"
                    prop={['healthyState', 'healthyStateDesc']}
                    {...otherProps}
                />
                <FormItem type="input" label="身高体重" prop="heightWeight" {...otherProps} />
            </FormContainer>
        </>
    );
};

export default Form1;
